{% extends "base.html" %}
{% load staticfiles %}

{% block page_content %}
<section class="content-header" style="padding-top:0px" xmlns="http://www.w3.org/1999/html">
<div class="row">
    <div class="box box-info">
        <div class="box-header">
            <h2>Indexing, Detection & Analysis models</h2>
        </div>
    </div>
</div>
</section>
<section class="content">
        <div class="row">
        <div class="col-lg-12">
            <div class="box box-primary">
            <div class="box-header with-border">
                <h4>Configured indexers</h4>
            </div>
            <div class="box-body">
                <table class="table dataTables-dict">
                <thead>
                <tr>
                    <th>Index name</th>
                    <th>Mode</th>
                    <th>weights file checksum</th>
                    <th>Indexer queue</th>
                </tr>
                </thead>
                <tbody>
                {% for i in visual_index_list %}
                    <tr>
                        <td>{{ i.name }} </td>
                        <td>{{ i.get_mode_display }} </td>
                        <td>{{ i.shasum }}</td>
                        <td>q_indexer_{{ i.pk }}</td>
                    </tr>
                {% endfor %}
                </tbody>
                </table>
            </div>
        </div>
        </div>
        <div class="col-lg-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h4>Configured & Trained detectors</h4>
                </div>
                <div class="box-body">
                <table class="table dataTables">
                <thead>
                <tr>
                    <th class="text-center">Name</th>
                    <th class="text-center">Type</th>
                    <th class="text-center">Mode</th>
                    <th class="text-center">Training frames</th>
                    <th class="text-center">Training boxes</th>
                    <th class="text-center">Objects</th>
                    <th class="text-center">Details</th>
                </tr>
                </thead>
                <tbody>
                {% for d in detectors %}
                    <tr>
                        <td>{{ d.name }} </td>
                        <td>{{ d.get_detector_type_display }} </td>
                        <td>{{ d.get_mode_display }} </td>
                        <td class="text-right">{{ d.frames_count }} </td>
                        <td class="text-right">{{ d.boxes_count }} </td>
                        <td>{{ d.classes }} </td>
                        <td class="text-center"><a href="/detectors/{{ d.pk }}">details</a></td>
                    </tr>
                {% endfor %}
                </tbody>
                </table>
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            <div class="box box-primary">
            <div class="box-header with-border">
                <h4>Configured analyzers</h4>
            </div>
            <div class="box-body">
                <table class="table dataTables-dict">
                <thead>
                <tr>
                    <th>Analyzer</th>
                    <th>Mode</th>
                    <th>url</th>
                    <th>labels</th>
                    <th>text</th>
                    <th>metadata</th>
                    <th>Analyzer queue</th>
                </tr>
                </thead>
                <tbody>
                {% for i in analyzers %}
                    <tr>
                        <td>{{ i.name }} </td>
                        <td>{{ i.get_mode_display }} </td>
                        <td>{{ i.url }}</td>
                        <td>{{ i.produces_labels }}</td>
                        <td>{{ i.produces_text }}</td>
                        <td>{{ i.produces_json }}</td>
                        <td>q_analyzer_{{ i.pk }}</td>
                    </tr>
                {% endfor %}
                </tbody>
                </table>
            </div>
        </div>
        </div>

    </div>
    <div class="row">
    <div class="col-lg-6">
        <div class="box box-primary">
            <form action="/index_video" method="POST">
            <div class="box-header with-border">
                <h4>Index custom set of frames or regions</h4>
            </div>
            <div class="box-body">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="form-group">
                            <label for="task_name">Indexing algorithm</label>
                            <select class="js-example-basic" id="visual_index_name" class="form-control" name="visual_index_name" style="width:100%">
                            {% for i in visual_index_list %}
                                <option value="{{ i.name }}">{{ i.name }}</option>
                            {% endfor %}
                            </select>
                        </div>
                        <div class="row">
                            <div class="col-xs-4"><div class="form-group"><label>object name<input type="text" class="form-control" name="object_name"> </label></div></div>
                            <div class="col-xs-4"><div class="form-group"><label>object_name_contains<input type="text" class="form-control" name="object_name__contains"></label></div></div>
                            <div class="col-xs-4"><div class="form-group"><label>text_contains<input type="text" class="form-control" name="text__contains"></label></div></div>
                        </div>
                        <div class="form-group">
                            <label for="frame_video_name">Video</label>
                            <select class="js-example-basic-multiple" multiple="multiple" id="frame_video_name" class="form-control" style="width:100%">
                            {% for v in videos %}
                                <option value="{{ v.pk }}">{{ v.name }}</option>
                            {% endfor %}
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="region_type">Region types</label>
                            <select class="js-example-basic" class="js-example-basic-multiple" multiple="multiple" id="region_type" class="form-control" name="region_type__in" style="width:100%">
                            {% for k,v in region_types %}
                                <option value="{{ k }}" selected="selected" >{{ v }}</option>
                            {% endfor %}
                        </select>
                        </div>
                        <div class="row">
                            <div class="col-xs-3"><div class="form-group"><label>Min height<input type="number" class="form-control" value="50" name="h__gte"></label></div></div>
                            <div class="col-xs-3"><div class="form-group"><label>Max height<input type="number" class="form-control" name="h__lte"></label></div></div>
                            <div class="col-xs-3"><div class="form-group"><label>Min width<input type="number"  class="form-control" value="50" name="w__gte"></label></div></div>
                            <div class="col-xs-3"><div class="form-group"><label>Max width<input type="number"  class="form-control" name="w__lte"></label></div></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box-footer text-center">
                <div class="form-group">
                    {% csrf_token %}
                    <button class="btn btn-primary" name="target" value="frames" type="submit" style="display:inline-block;margin-right:12px">Create custom index for selected frames</button>
                    <button class="btn btn-primary" name="target" value="regions" type="submit" style="display:inline-block;" >Create custom index for selected regions</button>
                </div>
            </div>
            </form>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h4>Detect objects using custom detector</h4>
            </div>
            <div class="box-body">
                        <form role="form" action="/detect_objects/"  method="post" >
                        <div class="row">
                        <div class="col-lg-6"><div class="form-group">
                                <label for="excluded_videos">Select detector</label>
                                <select class="js-example-basic-single" id="detector_pk" name="detector_pk" style="width:100%">
                                {% for k in detectors %}
                                    <option value="{{ k.pk }}">{{ k.name }}</option>
                                {% endfor %}
                                </select>
                        </div></div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="excluded_videos">Select video/dataset</label>
                                <select class="js-example-basic-single" id="video_pk" name="video_pk" style="width:100%">
                                {% for v in videos %}
                                    <option value="{{ v.pk }}">{{ v.name }}</option>
                                {% endfor %}
                                </select>
                            </div>
                        </div>
                        </div>
                        {% csrf_token %}
                        <div style="text-align: center">
                            <button type="submit" style="margin: auto" name="action" value="detect" class="btn btn-info"><i class="fa fa-play"></i> Apply detector</button>
                        </div>
                </form>
            </div>
        </div>
    </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h4>Index entries</h4>
                </div>
                <div class="box-body">
                    <table class="table dataTables-dict">
                    <thead>
                    <tr>
                        <th>Index name</th>
                        <th>Video name</th>
                        <th>Indexed object</th>
                        <th>Approximate</th>
                        <th>Features filename</th>
                        <th>Entries filename</th>
                        <th>count</th>
                        <th>created</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for k in index_entries %}
                        <tr>
                            <td>{{ k.algorithm }}</td>
                            <td>{{ k.video.name }} </td>
                            <td>{{ k.detection_name }} </td>
                            <td>{{ k.approximate }} </td>
                            <td>{{ k.features_file_name }} </td>
                            <td>{{ k.entries_file_name }} </td>
                            <td class="text-right">{{ k.count }}</td>
                            <td class="text-center">{{ k.created }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                    </table>

                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}
{% block page_js%}
<script>
    $(document).ready(function() {
        InitializeTables();
        var visual_index_name = $("#visual_index_name");
        visual_index_name.select2({theme: "bootstrap"});
        var frame_video_name = $("#frame_video_name");
        frame_video_name.select2({theme: "bootstrap",multiple:true});
        var region_type = $("#region_type");
        region_type.select2({theme: "bootstrap",multiple:true});
        var excluded_videos_ids = $("#excluded_videos");
        excluded_videos_ids.select2({theme: "bootstrap"});
        var selected_video_id = $("#video_pk");
        selected_video_id.select2({theme: "bootstrap"});
        var selected_detector_id = $("#detector_pk");
        selected_detector_id.select2({theme: "bootstrap"});
    })
</script>
{% endblock %}
